<template>
  <div class="container">
    <!-- 首页入口 -->
    <div class="home-entry">
      <!-- 左侧分类 -->
      <div class="home-category">
        <ul class="menu">
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li class="menu-item">
            <!-- 一级跳转 -->
            <router-link to="/category/id">居家 </router-link>
            <!-- 二级跳转 -->
            <router-link to="/category/sub/id">茶咖酒具 水具杯壶</router-link>
            <!-- 骨架 -->
            <!-- 左侧分类弹层 -->
            <div class="home-layer layer">
              <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
                <li>
                  <router-link to="/">
                    <img
                      src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                      alt=""
                    />
                    <div class="info">
                      <p class="name ellipsis-2">商品鞋子</p>
                      <p class="desc ellipsis">冬季商品鞋子</p>
                      <p class="price"><i>¥</i>89</p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!-- banner -->
      <div class="home-banner">
        <!-- 轮播图 -->
        <div class="carousel">
          <!-- 图片容器 -->
          <ul class="carousel-body">
            <!-- fade 显示的图片加上 -->
            <li class="carousel-item fade">
              <router-link to="/">
                <!-- 指定了  prop 对象之后，需要修改此处的数据使用 -->
                <img
                  src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
                />
              </router-link>
            </li>
          </ul>
          <!-- 上一张 -->
          <a href="javascript:;" class="carousel-btn prev"
            ><i class="iconfont icon-angle-left"></i
          ></a>
          <!-- 下一张 -->
          <a href="javascript:;" class="carousel-btn next"
            ><i class="iconfont icon-angle-right"></i
          ></a>
          <!-- 指示器 -->
          <div class="carousel-indicator">
            <!-- active 激活点 -->
            <span></span>
            <span class="active"></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新鲜好物 -->
  <div class="home-new" ref="lazyTarget">
    <!-- panel 面板 -->
    <div class="home-panel">
      <div class="container">
        <div class="head">
          <h3>
            新鲜好物
            <span>新鲜出炉 品质靠谱</span>
          </h3>
          <router-link to="/path" class="more">
            <span>查看全部</span>
            <i class="iconfont icon-angle-right"></i>
          </router-link>
        </div>
        <!-- 面板内容 -->
        <transition name="fade">
          <!-- 面板内容 -->
          <ul class="goods-list">
            <li class="hover-shadow">
              <router-link to="/product/id">
                <img
                  src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                  alt=""
                />
                <p class="name ellipsis">冬季男鞋</p>
                <p class="price">&yen;213</p>
              </router-link>
            </li>
            <li class="hover-shadow">
              <router-link to="/product/id">
                <img
                  src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                  alt=""
                />
                <p class="name ellipsis">冬季男鞋</p>
                <p class="price">&yen;213</p>
              </router-link>
            </li>
            <li class="hover-shadow">
              <router-link to="/product/id">
                <img
                  src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                  alt=""
                />
                <p class="name ellipsis">冬季男鞋</p>
                <p class="price">&yen;213</p>
              </router-link>
            </li>
            <li class="hover-shadow">
              <router-link to="/product/id">
                <img
                  src="https://yanxuan-item.nosdn.127.net/6e289ea8795025fddf3cff60d3f400a1.jpg"
                  alt=""
                />
                <p class="name ellipsis">冬季男鞋</p>
                <p class="price">&yen;213</p>
              </router-link>
            </li>
          </ul>
        </transition>
      </div>
    </div>
  </div>
  <!-- 人气爆款 -->
  <div class="home-hot">
    <div class="home-panel">
      <div class="container">
        <div class="head">
          <h3>
            人气推荐
            <span>人气爆款 不容错过</span>
          </h3>
          <router-link to="/path" class="more">
            <span>查看全部</span>
            <i class="iconfont icon-angle-right"></i>
          </router-link>
        </div>
        <!-- 面板内容 -->
        <transition name="fade">
          <ul class="goods-list">
            <li class="hover-shadow">
              <router-link to="/">
                <img
                  src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
                  alt=""
                />
                <p class="name">特惠推荐</p>
                <p class="desc">他们最实惠</p>
              </router-link>
            </li>
            <li class="hover-shadow">
              <router-link to="/">
                <img
                  src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
                  alt=""
                />
                <p class="name">特惠推荐</p>
                <p class="desc">他们最实惠</p>
              </router-link>
            </li>
            <li class="hover-shadow">
              <router-link to="/">
                <img
                  src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
                  alt=""
                />
                <p class="name">特惠推荐</p>
                <p class="desc">他们最实惠</p>
              </router-link>
            </li>
            <li class="hover-shadow">
              <router-link to="/">
                <img
                  src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
                  alt=""
                />
                <p class="name">特惠推荐</p>
                <p class="desc">他们最实惠</p>
              </router-link>
            </li>
          </ul>
        </transition>
      </div>
    </div>
  </div>
  <!-- 热门品牌 -->
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <h3>
          热门品牌
          <span>国际经典 品质保证</span>
        </h3>

        <a
          href="javascript:;"
          class="iconfont icon-angle-left prev disabled"
        ></a>
        <a href="javascript:;" class="iconfont icon-angle-right next"></a>
      </div>
      <div class="box">
        <ul class="list" :style="{ transform: `translateX(${0 * 1240}px)` }">
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <img
                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/b0941d16-a466-4f23-bbf4-90f818298abb.jpg"
                alt=""
              />
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import {} from 'vue'
</script>

<style lang="scss" scoped>
// 左侧分类
.home-category {
  width: 250px;
  height: 450px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 99;
  .menu {
    .menu-item {
      padding-left: 40px;
      height: 50px;
      line-height: 50px;
      &:hover {
        background: $xtxColor;
      }
      a {
        margin-right: 4px;
        color: #fff;
        &:first-child {
          font-size: 16px;
        }

        ~ a:hover {
          color: #333333;
        }
      }

      &:hover {
        .home-layer {
          display: block;
        }
      }
    }
  }
}

// 左侧分类弹出层样式
.layer {
  width: 990px;
  height: 500px;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 250px;
  top: 0;
  display: none;
  padding: 0 15px;
  h4 {
    font-size: 20px;
    font-weight: normal;
    line-height: 80px;
    small {
      font-size: 16px;
      color: #666;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 310px;
      height: 120px;
      margin-right: 15px;
      margin-bottom: 15px;
      border: 1px solid #eee;
      border-radius: 4px;
      background: #fff;
      &:nth-child(3n) {
        margin-right: 0;
      }
      a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        padding: 10px;
        &:hover {
          background: #e3f9f4;
        }
        img {
          width: 95px;
          height: 95px;
        }
        .info {
          padding-left: 10px;
          line-height: 24px;
          width: 190px;
          .name {
            font-size: 16px;
            color: #666;
          }
          .desc {
            color: #999;
          }
          .price {
            font-size: 22px;
            color: $priceColor;
            i {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

// banner 样式
.home-banner {
  width: 1240px;
  height: 450px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}

.carousel {
  .carousel-btn.prev {
    left: 270px !important;
  }
  .carousel-indicator {
    padding-left: 250px !important;
  }
}
// banner 样式结束

// 轮播图样式

.carousel {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 150px;
  position: relative;
  .carousel {
    &-body {
      width: 100%;
      height: 100%;
    }
    &-item {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 0.5s linear;
      &.fade {
        opacity: 1;
        z-index: 1;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-indicator {
      position: absolute;
      left: 0;
      bottom: 20px;
      z-index: 2;
      width: 100%;
      text-align: center;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        cursor: pointer;
        ~ span {
          margin-left: 12px;
        }
        &.active {
          background: #fff;
        }
      }
    }
    &-btn {
      width: 44px;
      height: 44px;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 228px;
      z-index: 2;
      text-align: center;
      line-height: 44px;
      opacity: 0;
      transition: all 0.5s;
      &.prev {
        left: 20px;
      }
      &.next {
        right: 20px;
      }
    }
  }
  &:hover {
    .carousel-btn {
      opacity: 1;
    }
  }
}

// 轮播商品
.slider {
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
  > a {
    width: 240px;
    text-align: center;
    img {
      padding: 20px;
      width: 230px !important;
      height: 230px !important;
    }
    .name {
      font-size: 16px;
      color: #666;
      padding: 0 40px;
    }
    .price {
      font-size: 16px;
      color: $priceColor;
      margin-top: 15px;
    }
  }
}
// 轮播图样式结束

// 新鲜好物
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    background: #f0f9f4;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding: 12px 30px 0 30px;
      text-align: center;
    }
    .price {
      color: $priceColor;
    }
  }
}

// 查看更多样式
.more {
  margin-bottom: 2px;
  span {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    color: #999;
  }
  i {
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    top: 2px;
    color: #ccc;
  }
  &:hover {
    span,
    i {
      color: $xtxColor;
    }
  }
}

// panel 面板样式
.home-panel {
  background-color: #fff;
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      span {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}

// 新鲜好物样式结束

// 人气爆款
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 426px;
  li {
    width: 306px;
    height: 406px;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }
    .desc {
      color: #999;
      font-size: 18px;
    }
  }
}

// 查看更多样式
.more {
  margin-bottom: 2px;
  span {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    color: #999;
  }
  i {
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    top: 2px;
    color: #ccc;
  }
  &:hover {
    span,
    i {
      color: $xtxColor;
    }
  }
}

// panel 面板样式
.home-panel {
  background-color: #fff;
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      span {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
// 人气爆款样式结束

// 热门品牌
.home-panel {
  background: #f5f5f5;
}
.iconfont {
  width: 20px;
  height: 20px;
  background: #ccc;
  color: #fff;
  display: inline-block;
  text-align: center;
  margin-left: 5px;
  background: $xtxColor;
  &::before {
    font-size: 12px;
    position: relative;
    top: -2px;
  }
  &.disabled {
    background: #ccc;
    cursor: not-allowed;
  }
}
.box {
  display: flex;
  width: 100%;
  height: 345px;
  overflow: hidden;
  padding-bottom: 40px;
  .list {
    width: 200%;
    display: flex;
    transition: all 1s;
    li {
      margin-right: 10px;
      width: 240px;
      &:nth-child(5n) {
        margin-right: 0;
      }
      img {
        width: 240px;
        height: 305px;
      }
    }
  }
}

.skeleton {
  width: 100%;
  display: flex;
  .item {
    margin-right: 10px;
    &:nth-child(5n) {
      margin-right: 0;
    }
  }
}

// panel 面板样式
.home-panel {
  background-color: #fff;
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      span {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
// 热门品牌样式结束
</style>
